<template>
  <div id="search-teach">
    <div class="echarts">
      <el-form
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item
          class="year"
          label="开始日期"
        >
          <el-date-picker
            v-model="form.startTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          class="year"
          label="结束日期"
        >
          <el-date-picker
            v-model="form.endTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="讲师类型">
          <el-select
            v-model="form.type"
            placeholder="请选择"
          >
            <el-option
              :value="1"
              label="青年讲师团"
            />
            <el-option
              :value="6"
              label="基层青年讲师团"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
        <div
          id="barChart"
          style="width: 100%; height: 600px"
        ></div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getToken, setToken, getName, setName } from "@/utils/auth";
import echarts from "echarts";
export default {
  components: {},
  data() {
    return {
      ChartPie: "",
      form: {
        startTime: "",
        endTime: "",
        type:1,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.role = getToken() - 0;
    this.init();
  },
  watch: {},
  methods: {
    init() {
      this.initTime();
      this.getData();
    },
    initTime() {
      this.form.startTime = this.getInitStartTime();
      this.form.endTime = this.getInitEndTime();
    },
    //获取今年1月1日
    getInitStartTime() {
      // 获取当前年份
      let currentYear = new Date().getFullYear();

      // 创建当前年份的1月1日的Date对象
      let janFirst = new Date(currentYear, 0, 1); // 月份从0开始，所以1月是0

      // 将Date对象格式化为"YYYY-MM-DD"的字符串
      let formattedDate =
        janFirst.getFullYear() +
        "-" +
        ("0" + (janFirst.getMonth() + 1)).slice(-2) +
        "-" + // 月份加1，并确保是两位数
        ("0" + janFirst.getDate()).slice(-2); // 确保日期是两位数

      // 输出结果
      console.log(formattedDate);
      return formattedDate;
    },
    //获取今天日期
    getInitEndTime() {
      // 创建一个Date对象表示当前日期和时间
      let currentDate = new Date();

      // 获取年份部分
      let year = currentDate.getFullYear();

      // 获取月份部分，注意JavaScript中月份是从0开始的，所以我们需要加1
      let month = currentDate.getMonth() + 1;
      month = month < 10 ? "0" + month : month; // 确保月份是两位数

      // 获取日期部分
      let day = currentDate.getDate();
      day = day < 10 ? "0" + day : day; // 确保日期是两位数

      // 将年、月、日拼接成"YYYY-MM-DD"格式的字符串
      let formattedDate = year + "-" + month + "-" + day;

      // 输出结果
      console.log(formattedDate);
      return formattedDate;
    },
    getData() {
      this.$http.post(`/teacher/teacherLectureCount`, this.form).then(
        (response) => {
          let res = response.data;
          if (res.code == "200") {
            console.log(res, 222);
            this.drawShape(res.data);
          } else {
            this.$message.error(res.message);
          }
        },
        (err) => {
          console.log("err");
        }
      );
    },
    //王天宇
    //查询
    onSubmit() {
      this.getData();
    },
    //绘图
    drawShape(data) {
      let self = this;
      // let yAxis = data.map(item => item.orgNameArray);
      // let serData = data.map(item => item.letCountArray);
      let yAxis = data.orgNameArray;
      let serData = data.letCountArray;
      console.log();
      let myChart = document.getElementById("barChart");
      self.ChartPie = echarts.init(myChart);
      let option = {
        title: {
          //text: '世界人口总量',
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          name: "讲师名称",
          type: "category",
          data: data.xData,
          axisLabel: {
            // 显示所有标签，不自动隐藏
            interval: 0,
            // 旋转标签角度，避免重叠
            rotate: 45,
            // 设置标签对齐方式
            align: "right",
            // 设置标签与轴线的边距
            margin: 10,
          },
        },
        yAxis: [
          {
            name: "讲座次数",
            splitNumber: 1,
            type: "value",
          },
          {
            name: "宣讲积分",
            splitNumber: 1,
            type: "value",
          },
        ],
        series: [
          {
            type: "bar",
            data: data.yData,
          },
          {
            type: "bar",
            data: data.scoreAllData,
            itemStyle: {
              color: "rgb(80,135,236)",
            },
          },
        ],
      };
      self.ChartPie.setOption(option);
      self.ChartPie.hideLoading();
      window.addEventListener("resize", () => {
        self.ChartPie.resize();
      });
    },
    //王天宇
  },
};
</script>

<style scoped>
.el-input >>> .el-input__inner {
  width: 350px;
}
.mange {
  padding: 70px;
  overflow: hidden;
  width: 91%;
}
/deep/ .el-table__body,
/deep/ .el-table__header {
  width: auto !important;
}

.indexPage {
  padding: 70px;
  overflow: hidden;
}

.indexPage-info {
  margin-right: 40px;
  margin-bottom: 40px;
  cursor: pointer;
}
.box {
  width: 80px;
  background: #36cfca;
  height: 80px;
  text-align: center;
}
.box1 {
  width: 80px;
  background: #fd4d4f;
  height: 80px;
  text-align: center;
}
.box2 {
  width: 80px;
  background: #ffc53d;
  height: 80px;
  text-align: center;
}
.box3 {
  width: 80px;
  background: #42a7ff;
  height: 80px;
  text-align: center;
}
.box4 {
  width: 80px;
  background: #43c963;
  height: 80px;
  text-align: center;
}
.box5 {
  width: 80px;
  background: #9253df;
  height: 80px;
  text-align: center;
}
.rightd {
  border: 1px solid #e3e3e3;
  height: 80px;
  width: 200px;
  text-align: center;
  line-height: 80px;
}
.rightd p {
  line-height: 15px;
  padding-top: 18px;
  font-size: 16px;
}
.indexPage-number {
  text-align: right;
  line-height: 50px;
  height: 50px;
  font-size: 16px;
}
i {
  color: #fff;
  font-size: 30px;
  line-height: 80px;
}
</style>
<!-- 王天宇 -->

<style lang="scss">
#search-teach {
  .echarts {
    padding: 0 70px 70px;
  }
  .el-cascader {
    width: auto !important;
    margin-right: 0 !important;
  }
  .el-form-item {
    .el-input {
      display: inline;
      .el-input__inner {
        width: 500px;
      }
    }
    .el-input.el-input--suffix {
      display: block;
    }
    &.year {
      .el-input__inner {
        width: 220px;
      }
    }
  }
}
</style>

<!-- 王天宇 -->
